<template>
  <el-card class="box-card" shadow="always">
    <div slot="header" class="clearfix">
      <span>{{ title }}</span>
      <el-button-group style="float: right;">
        <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
      </el-button-group>
    </div>
    <el-descriptions class="margin-top" :column="2" :size="size" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          接口名称
        </template>
        {{this.form1.apiName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          接口版本
        </template>
        {{this.form1.apiVersion}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          请求类型
        </template>
        {{this.form1.reqMethod}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          返回格式
        </template>
        {{this.form1.resType}}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions direction="vertical" :column="5" border>
      <el-descriptions-item label="请求头" :span="5" content-style="display:none" label-style="text-align: center"></el-descriptions-item>
    </el-descriptions>
    <el-descriptions direction="horizontal" :column="2" border>
      <el-descriptions-item label="api_key">
        <!-- {{this.form1.header.apiKey}} -->
        申请获取
      </el-descriptions-item>
      <el-descriptions-item label="secret_key">
        <!-- {{this.form1.header.secretKey}} -->
        申请获取
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions direction="vertical" :column="5" border>
      <el-descriptions-item label="请求参数" :span="5"  label-style="text-align: center">
        <el-table
          v-loading="false"
          :data="this.form1.reqParams"
          tooltip-effect="dark"
        >
          <template v-for="(item, index) in requestColumns">
            <el-table-column
              v-if="item.show"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :formatter="item.formatter"
              align="center"
              show-overflow-tooltip
            />
          </template>
        </el-table>
      </el-descriptions-item>

      <el-descriptions-item label="返回字段" :span="5"  label-style="text-align: center">
        <el-table
          v-loading="loading"
          :data="this.form1.resParams"
          tooltip-effect="dark"
          :size="tableSize"
        >
          <template v-for="(item, index) in responseColumns">
            <el-table-column
              v-if="item.show"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :formatter="item.formatter"
              align="center"
              show-overflow-tooltip
            />
          </template>
        </el-table>
      </el-descriptions-item>

    </el-descriptions>
    <el-descriptions direction="vertical" :column="5" border>
      <el-descriptions-item label="返回信息" :span="5" content-style="display:none" label-style="text-align: center"></el-descriptions-item>
      <el-descriptions-item label="返回状态" :span="1"><div><el-tag style="margin-right: 10%">success:</el-tag>true:成功;false:失败</div></el-descriptions-item>
      <el-descriptions-item label="返回代码" :span="1"><el-tag style="margin-right: 10%">code </el-tag>200</el-descriptions-item>
      <el-descriptions-item label="返回信息说明" :span="1"><el-tag style="margin-right: 10%">msg</el-tag>返回成功</el-descriptions-item>
      <el-descriptions-item label="返回数据" :span="1"><el-tag style="margin-right: 10%">data</el-tag></el-descriptions-item>
      <el-descriptions-item label="时间戳" :span="1"><el-tag style="margin-right: 10%">timestamp</el-tag>1596693801302</el-descriptions-item>
    </el-descriptions>
    <el-descriptions direction="vertical" :column="5" border>
      <el-descriptions-item label="返回示例" :span="5" content-style="display:none" label-style="text-align: center"></el-descriptions-item>
    </el-descriptions>
    <el-descriptions direction="horizontal" :column="2" border>
      <el-descriptions-item label="成功示例" span="1">{{this.form1.resExample[0]}}</el-descriptions-item>
      <el-descriptions-item label="失败示例" span="1">
        {{this.form1.resExample[1]}}      </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script>
import { getDataApi, getDataApiInfoDetail } from '@/api/market/dataapi'
import { listDataSource } from '@/api/metadata/datasource'
import { listDataTable } from '@/api/metadata/datatable'

export default {
  name: 'ShareApiDetail',
  components: {

  },
  props: {
    data: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      title: 'API接口信息',
      // 展示切换
      showOptions: {
        data: {},
        showList: true,
        showApply: false,
        showTableDetail: false,
        showApiDetail: false
      },
      active: 1,
      // 表单参数
      form1: {
        id: undefined,
        apiName: undefined,
        apiVersion: undefined,
        apiUrl: undefined,
        reqMethod: undefined,
        resType: undefined,
        remark: undefined,
        reqParams: [],
        resParams: [],
        resExample: [],
        header:{}
      },
      requestColumns: [
        { prop: 'paramName', label: '参数名称', show: true },
        { prop: 'paramComment', label: '描述', show: true },
        { prop: 'paramType', label: '参数类型', show: true },
        { prop: 'nullable', label: '是否为空', show: true },
        { prop: 'exampleValue', label: '示例值', show: true },
      ],
      responseColumns: [
        { prop: 'fieldName', label: '字段名称', show: true },
        { prop: 'dataType', label: '数据类型', show: true },
        { prop: 'fieldComment', label: '描述', show: true },
        { prop: 'exampleValue', label: '示例值', show: true },
      ],

      // 请求方式数据字典
      reqMethodOptions: [],
      // 返回格式数据字典
      resTypeOptions: [],
      // 是否数据字典
      whetherOptions: [],
      // 状态数据字典
      statusOptions: [],
      // 数据源数据字典
      sourceOptions: [],
      // 数据库表数据字典
      tableOptions: [],
      // 配置方式数据字典
      configTypeOptions: [],
      // 操作符数据字典
      whereTypeOptions: [],
      // 参数类型数据字典
      paramTypeOptions: []
    }
  },
  created() {
    console.log('id:' + this.data.id)
    this.getDicts('data_req_method').then(response => {
      if (response.success) {
        this.reqMethodOptions = response.data
      }
    })
    this.getDicts('data_res_type').then(response => {
      if (response.success) {
        this.resTypeOptions = response.data
      }
    })
    this.getDicts('sys_yes_no').then(response => {
      if (response.success) {
        this.whetherOptions = response.data
      }
    })
    this.getDicts('data_api_status').then(response => {
      if (response.success) {
        this.statusOptions = response.data
      }
    })
    this.getDicts('data_config_type').then(response => {
      if (response.success) {
        this.configTypeOptions = response.data
      }
    })
    this.getDicts('data_where_type').then(response => {
      if (response.success) {
        this.whereTypeOptions = response.data
      }
    })
    this.getDicts('data_param_type').then(response => {
      if (response.success) {
        this.paramTypeOptions = response.data
      }
    })
  },
  mounted() {
    this.getDataApi(this.data.id)
  },
  methods: {
    showCard() {
      this.$emit('showCard', this.showOptions)
    },
    getDataSourceList() {
      listDataSource().then(response => {
        if (response.success) {
          this.sourceOptions = response.data
        }
      })
    },

    /** 获取详情 */
    async getDataApi(id) {
      await getDataApiInfoDetail(id).then(response => {
        if (response.success) {
          this.form1 = response.data.dataApiMap.data
          this.form1.header =  response.data.dataApiMap.header
          this.form1.reqParams =  response.data.reqParams
          this.form1.resParams =  response.data.resParams
          this.form1.resExample =  response.data.resExample
        }
      })
    },
    /** 接口文档 */
    handleWord() {
      word(this.data.id).then(response => {
        const blob = new Blob([response])
        const fileName = '接口文档.docx'
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href)
          // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card ::v-deep .el-card__body {
  height: calc(100vh - 230px);
  overflow-y: auto;
}
</style>
